<template>
  <div class="manage-wrapper">
    <adminMemu></adminMemu>
    <div class="manage-contianer">
      <div class="manage-navs">
        <div v-for="(item,index) in navList" :key="index">{{item}}</div>
      </div>
      <div class="manage-content">
        <div class="content-item" v-for="(store,index) in storeData" :key="index">
          <p>{{store.id}}</p>
          <p>{{store.name}}</p>
          <p>{{store.address}}</p>
          <p>{{store.leader}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import adminService from '../../service/admin'
import adminMemu from '../admin/adminMemu'
export default {
  name: 'StoreManagement',
  components: {
    adminMemu
  },
  data () {
    return {
      navList: ['编号', '店铺名', '地址', '负责人'],
      storeData: []
    }
  },
  async mounted () {
    let result = await adminService.getStore()
    this.storeData = result.data
  }
}
</script>

<style lang="scss" scoped>
.manage-wrapper {
  width: 100%;
  height: calc(100% - 1px);
  background: #FFFFFF;
  border-top: 1px solid transparent;
  .manage-contianer {
    width: 1000px;
    margin: 20px auto;
    border: 1px solid #ccc;
    .manage-navs {
      height: 40px;
      line-height: 40px;
      padding: 10px 20px;
      div {
        width: 150px;
        float: left;
        text-align: center;
      }
    }
    .manage-content {
      width: 100%;
      overflow: hidden;
      .content-item {
        padding: 10px 20px;
        height: 40px;
        line-height: 40px;
        border-top: 1px solid #ccc;
        p {
          width: 150px;
          float: left;
          text-align: center;
        }
         p:nth-child(5) {
          width: 100px;
          height: 25px;
          line-height: 25px;
          border: 1px solid #ccc;
          border-radius: 10px;
          cursor: pointer;
          margin: 7px 0;
        }
      }
    }
  }
}
</style>